<script setup>
import { UserFilled } from '@element-plus/icons-vue'
import {
  View,
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header class="header">
        <div class="header-content">
          <img  style="height: 130px;width: 130px" src="@/logo.png" alt="Logo" class="header-logo">
          <div>
            <img src="@/img.png" alt="Logo-text" style="height: 45px" class="header-logotext">
            <p STYLE="width: 1000px;margin-left: 10px;margin-top: 10px">NEUSOFT&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SMART&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;COMMUNITY</p>
          </div>
        </div>
          <div class="avatar" >
            <el-avatar :size="55" :icon="UserFilled" />
          </div>
      </el-header>

      <el-container>
        <el-aside class="aside" >
          <el-menu router default-active="1" >
            <el-menu-item index="/admin/adminhomepage" class="menu-item">
              <el-icon><location /></el-icon>
              <span >首页</span>
            </el-menu-item>
            <el-menu-item index="/admin/role-management" class="menu-item">
              <el-icon><icon-menu /></el-icon>
              <span>角色管理</span>
            </el-menu-item>
            <el-menu-item index="/admin/membership-management" class="menu-item">
              <el-icon><document /></el-icon>
              <span>会员管理</span>
            </el-menu-item>
            <el-menu-item index="/admin/user-management" class="menu-item">
              <el-icon><setting /></el-icon>
              <span>用户管理</span>
            </el-menu-item>
            <div class="submenu">
              <el-sub-menu >
                <template #title>
                  <el-icon><View /></el-icon>
                  <span>查看登录日志</span>
                </template>
                <!-- 在这里加入下拉框的内容 -->
                <el-menu-item index="/admin/userloginlogs" style="height: 75px">用户登录日志</el-menu-item>
                <el-menu-item index="/admin/adminloginlogs" style="height: 75px">管理员登录日志</el-menu-item>
              </el-sub-menu> 
            </div>

          </el-menu>
        </el-aside>

        <el-main class="main">
          <router-view></router-view>
        </el-main>

      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.common-layout {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden; /* 隐藏滚动条 */
}
.header {
  height: 125px;
  border: 1px solid #ccc;
}
.header-logo {
  float: left;
  width: 100px;
  height: auto;
  margin-top: -5px;
  margin-left: -175px;
}
.header-logotext{
  margin-top: 25px;
}
.header-content {
  display: flex;
  align-items: center;
  position: absolute;
  left: 10%; /* 图片和标题距离左侧20% */
  width: 60%; /* 可根据实际情况调整，确保内容不会溢出 */
}
.avatar{
  margin-left: 1600px;
  margin-top: 32.5px;
}
.aside {
  position: absolute;
  top: 125px;
  left: 0;
  bottom: 0;
  width: 200px;
  height: calc(100% - 60px);
  border: 1px solid #ccc;
}
 span {
  font-size: 18px;
}

.main {
  border: 3px solid #ccc;
  border-radius: 4px;
  position: absolute;
  top: 125px;
  left: 200px;
  right: 0;
  bottom: 0;
}
.menu-item{
  height: 100px;
  border:1px solid #DCDFE6;
  border-radius: 4px;
}
.submenu{
  height: 100px;
  padding-top: 22px;
  border-bottom:1px solid #DCDFE6 ;
  transition:background-color 0.25s ease-out;
}
.submenu:hover{
  cursor: pointer;
  background-color: #ecf5ff;
}
</style>